<!--  -->
<template>
  <div>
    <div class="todo-header">
      <input type="text"
             placeholder="请输入你的任务名称，按回车键确认"
             v-model="value"
             @keyup.enter="addObj" />
      <!-- @input="addObj" -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  props: ['receiveObject'],
  methods: {
    // 添加一个对象
    addObj () {
      if (!this.value.trim()) return alert("输入不能为空")
      // if (this.timer) {
      //   clearTimeout(this.timer)
      // }
      // this.timer = setTimeout(() => {
      // }, 500)
      let obj = {
        id: new Date().getTime(),
        hobby: this.value,
        done: false
      }
      // 向todoList里面传入对象
      this.receiveObject(obj)
      // 清空输入值
      this.value = ''
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
</style>